<script setup lang="ts">
import { ref } from 'vue'
import {  onLoad } from '@dcloudio/uni-app'
import { updateHarDwareDetailApi } from '@/services/equipment'
import { useDeviceStore } from '@/stores'
import { onUnload } from '@dcloudio/uni-app'
const deviceStore = useDeviceStore()
const showSex = ref(false)
const id = ref<number>(0)
const sex = ref<string>('保密')
const age = ref<number>(0)
const weight = ref<number>(0)
const name = ref<string>('')
const picture = ref<string>('')
onLoad(() => {
  id.value = deviceStore?.HarDwareDetail!.id
  sex.value = deviceStore?.HarDwaresex!
  age.value = deviceStore?.HarDwareDetail!.age
  weight.value = deviceStore?.HarDwareDetail!.weight
  name.value = deviceStore?.HarDwareDetail!.name
  picture.value = deviceStore?.HarDwareDetail!.picture
})

const actions = [
  {
    name: '男',
  },
  {
    name: '女',
  },
  {
    name: '保密',
  },
]
const sexSelect = (e: any) => {
  //console.log(e.name)
  sex.value = e.name
}
//上传修改
const form = ref<any>()
const handlenickname = async (e: any) => {
  name.value = e.detail.value.nickname
  model.value.nickname = e.detail.value.nickname
  model.value.age = age.value
  model.value.weight = weight.value
  console.log(model.value.weight)
  form.value
    .validate()
    .then(() => {
      submit()
    })
    .catch((err: any) => {
      console.log(err)
    })
}
const submit = async () => {
  let sexnumber = 0
  switch (sex.value) {
    case '男':
      sexnumber = 1
      break
    case '女':
      sexnumber = 2
      break
    case '保密':
      sexnumber = 0
      break
  }
  const res = await updateHarDwareDetailApi({
    id: id.value,
    name: name.value,
    picture: picture.value,
    sex: sexnumber,
    age: age.value,
    weight: weight.value,
  })
  if (res.msg === '对象正常') {
    //console.log(deviceStore?.HarDwareDetail?.deviceNum)
    deviceStore.getHarDwareDetail(deviceStore?.HarDwareDetail!.deviceNum)
    uni.navigateBack()
  }
}
onUnload(() => {
  deviceStore.getDeviceList()
})
//修改头像
const baseURL = 'https://szsensing.com:8581/'
const updateAvatar = (e: any) => {
  console.log(e)
  picture.value = e.detail.avatarUrl
  uni.uploadFile({
    url: `/slp/user/setPicture/${id.value}`,
    filePath: e.detail.avatarUrl,
    name: 'file',
    success: (res) => {
      console.log(res)
      picture.value = baseURL + JSON.parse(res.data).data
    },
  })
}
const rules = ref({
  nickname: [
    {
      required: true,
      message: '请输入长度为10个字符以内的昵称',
      trigger: ['blur'],
      max: 10,
    },
  ],
  age: [
    {
      required: true,
      message: '请输入1-100年龄',
      trigger: ['blur'],
      pattern: /^(100|[1-9][0-9]?)$/,
    },
  ],
  weight: [
    {
      required: true,
      message: '请输入正数体重',
      trigger: ['blur'],
      //匹配正整数
      pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
    },
  ],
})
//这边写1是为了不触发blur校验，因为model的值会被用来校验，但是一开始写的时候v-model采用的其他值来绑定的，并不在model对象里
const model = ref({
  nickname: '',
  age: 1,
  weight: 1,
})
const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>
<template>
  <view class="content">
    <view class="title">
      <u-icon name="arrow-left" color="#ffff" size="22" @click="back"></u-icon>
      {{ '编辑设备信息' }}
    </view>
    <!-- 原生导航栏不支持背景图，而且很多页面样式不统一，不好封装成组件 -->
    <view class="info-box">
      <form @submit="handlenickname">
        <u-form ref="form" :rules="rules" :model="model">
          <u-cell-group :border="false" >
            <u-cell title="头像" isLink>
              <template #value>
                <button
                  plain
                  open-type="chooseAvatar"
                  @chooseavatar="updateAvatar"
                  style="border-color: white; padding: 0 9.615rpx"
                >
                  <u-avatar :src="picture"></u-avatar>
                </button>
              </template>
            </u-cell>
            <u-cell title="昵称">
              <template #value>
                <u-form-item prop="nickname">
                  <input v-model="name" type="nickname" class="name" name="nickname" />
                </u-form-item>
              </template>
            </u-cell>
            <u-cell title="性别" isLink>
              <template #value>
                <view @click="showSex = true" class="sex">
                  <up-input
                    border="none"
                    v-model="sex"
                    inputAlign="right"
                    :readonly="true"
                  ></up-input>
                </view>
              </template>
            </u-cell>
            <u-cell title="年龄">
              <template #value>
                <view class="age">
                  <u-form-item prop="age">
                    <view style="display: flex">
                      <up-input border="none" v-model="age" inputAlign="right"></up-input>
                      <view>{{ '岁' }}</view>
                    </view>
                  </u-form-item>
                </view>
              </template>
            </u-cell>
            <u-cell title="体重">
              <template #value>
                <view class="weight">
                  <u-form-item prop="weight">
                    <view style="display: flex">
                      <up-input border="none" v-model="weight" inputAlign="right"></up-input>
                      <view>{{ 'kg' }}</view>
                    </view>
                  </u-form-item>
                </view>
              </template>
            </u-cell>
          </u-cell-group>
        </u-form>
        <button form-type="submit" class="submitButton" hover-class="button-hover">确定</button>
      </form>
    </view>
    <u-action-sheet
      :show="showSex"
      :actions="actions"
      title="请选择性别"
      @close="showSex = false"
      @select="sexSelect"
    >
    </u-action-sheet>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
  font-family: PingFangSC-regular;
  .content {
    position: relative;
    height: 100%;
    padding-top: 115.385rpx;
    background: url(@/static/starry2.png) no-repeat;
    background-size: contain;
    .title {
      margin-bottom: 19.231rpx;
      font-size: 34.615rpx;
      text-align: center;
      color: #ffff;
      position: relative;
      .u-icon {
        position: absolute;
        left: 3%;
      }
    }
    .info-box {
      .name {
        text-align: right;
        margin-right: 19.231rpx;
      }
      .sex {
        width: 96.154rpx;
      }
      .age {
        display: flex;
        line-height: 46.154rpx;
      }
      .weight {
        display: flex;
        line-height: 46.154rpx;
      }
      .submitButton {
        margin: 38.462rpx auto;
        width: 634.615rpx;
        border-radius: 192.308rpx;
        border: 1px solid #3780a6;
        background-color: #3780a6;
        color: #ffff;
        font-size: 26.923rpx;
      }
      .button-hover {
        background-color: #2f6d8d;
        color: #d9d9d9;
      }
    }
  }
}
</style>
